<template>
	<view class="page" v-if="pageInfo && payInfo">
		<view class="order-info" :style="'background:' + mainColor">
			<view class="avatar"><image class="img" :src="pageInfo.order_info.avatar" mode=""></image></view>
			<view class="desc-box">
				<view class="nickname">{{pageInfo.order_info.nickname}}：</view>
				<lang v-if="isOrderUser && orderStatus == 0" class="desc" keywords="发起了订单代付请求~" chineseTxt="发起了订单代付请求~"></lang>
				<lang v-if=" (orderStatus == 0 && !isOrderUser) || (orderStatus == 1 && !isOrderUser && (payUser == 1 || payUser == 3))" class="desc" keywords="Hi，帮我代付一下外卖订单呗~" chineseTxt="Hi，帮我代付一下外卖订单呗~"></lang>
				<lang v-if="payUser == 2 && orderStatus == 1" keywords="哇哦，我的订单已被其他好友支付了" chineseTxt="哇哦，我的订单已被其他好友支付了"></lang>
				<lang v-if="payUser == 0 && orderStatus == 1" keywords="哇哦，我已经自己支付了订单" chineseTxt="哇哦，我已经自己支付了订单"></lang>
				<lang v-if="orderStatus == 2" keywords="很遗憾，我的外卖订单已取消" chineseTxt="很遗憾，我的外卖订单已取消"></lang>
			</view>
		</view>
		<view class="btn-wrapper">
			<view class="price-box">
				<block v-if="orderStatus == 0">
					<lang class="bold" keywords="需付款" chineseTxt="需付款"></lang>
					<text class="bold">{{currency}}</text>
					<text class="big">{{pageInfo.order_info.price}}</text>
				</block>
				<lang v-if="orderStatus == 2" class="big" keywords="订单已取消" chineseTxt="订单已取消"></lang>
				<block v-if="orderStatus == 1">
					<view v-if="isOrderUser && payUser != 0" class="big">
						<lang keywords="好友已成功帮你支付订单" chineseTxt="好友已成功帮你支付订单"></lang>
					</view>
					<block v-if="!isOrderUser && payUser == 1">
						<view class="big" style="margin-bottom: 20px;">
							<lang keywords="已帮好友成功支付订单" chineseTxt="已帮好友成功支付订单"></lang>
						</view>
						<view>
							<lang keywords="支付金额" chineseTxt="支付金额"></lang>
							<view>
								<text class="bold">{{currency}}</text>
								<text class="big">{{pageInfo.order_info.price}}</text>
							</view>
						</view>
					</block>
					<view v-if="(isOrderUser && payUser == 0) || (!isOrderUser && payUser != 1)" class="big">
						<lang keywords="订单已支付" chineseTxt="订单已支付"></lang>
					</view>
					<view style="color:#888;font-size:12px;margin-top:6px;"><lang keywords="支付时间" chineseTxt="支付时间"></lang>：{{payInfo.pay_time}}</view>
				</block>
			</view>
			<button v-if="isOrderUser && orderStatus == 0" class="solid-btn" :style="'background:' + mainColor" open-type="share" @tap="shareToFriend" key='shareToFriend'>
				<lang keywords="发给微信好友" chineseTxt="发给微信好友"></lang>
			</button>
			<button v-if="!isOrderUser && orderStatus == 0" class="solid-btn" :style="'background:' + mainColor" @tap="payForFriend" key='payForFriend'>
				<lang keywords="为好友买单" chineseTxt="为好友买单"></lang>
			</button>
			<button v-if="isOrderUser && orderStatus == 1" class="solid-btn" :style="'background:#fff;color:' + mainColor + ';border-color:' + mainColor" @tap="checkOrderDetail" key='checkOrderDetail'>
				<lang keywords="查看订单详情" chineseTxt="查看订单详情"></lang>
			</button>
			<button v-if="!isOrderUser && orderStatus == 2" class="solid-btn" :style="'background:' + mainColor" @tap="goToShop" key='goToShop'>
				<lang keywords="我也要找人买单" chineseTxt="我也要找人买单"></lang>
			</button>
		</view>
		<view class="goods-list">
			<view class="shop-name">{{pageInfo.order_info.store_name}}</view>
			<view class="goods-item" v-for="goods in pageInfo.goods_list">
				<image class="goods-img" :src="goods.goods_image" mode="aspectFit"></image>
				<view class="info">
					<view class="name-box">
						<text class="goods-name">{{goods.name}}</text>
						<text class="goods-price">{{currency + goods.discount_price_all}}</text>
					</view>
					<view class="desc">{{goods.str}}</view>
					<view class="num">x{{goods.num}}</view>
				</view>
			</view>
		</view>
		<view class="tip-box">
			<view class="title"><lang keywords="说明" chineseTxt="说明"></lang></view>
			<view class="desc" v-for="item in pageInfo.note">{{item}}</view>
		</view>
		
		<!-- #ifdef H5 -->
		<view class="web-share" v-if="webShareTip"  @tap="closeMask('webShareTip')">
			<image class="img" :src="requestDomain+'static/images/share_friend.png'" mode=""></image>
		</view>
		<!-- #endif -->
	</view>
</template>

<script>
	import common from '../../../utils/common.js'
	var _this
	export default {
		data () {
			return {
				order_id: '',
				pageInfo: '',
				mainColor: '',
				currency: '¥',
				webShareTip: false,
				requestDomain: '',
				is_share: '',
				checkPayTimer: 0,
				payInfo: '',
				isOrderUser: true, // true订单分享人
				payUser: 0, // 0自己支付  1当前打开的好友支付 2别人支付 3不知身份
				orderStatus: 0, // 0 未支付 1已支付 2已取消
			}
		},
		onLoad (options) {
			console.log('222228888999999999999999999999999999代付页初始化', options)
			_this = this
			_this.order_id = options.order_id
			_this.requestDomain = common.requestDomain
			_this.is_share = options.is_share ? options.is_share : 0
			
			// #ifdef H5
				console.log('准备跳小程序页', _this.id);
				common.webToMiniapp(_this.route, options, 'redirect')
			// #endif
			
			
			common.getConfig(function(data){
				_this.mainColor = data.config.mobile_head_color
				_this.currency = data.config.Currency_symbol
				
				getDetail()
			})
		},
		onShow () {
			// #ifdef H5
			if (_this.pageInfo) {
				_this.setWxShare()
			}
			// #endif
			if (_this.pageInfo && _this.checkPayTimer == 0) {
				checkPay()
			}
		},
		onHide () {
			clearInterval(_this.checkPayTimer)
			_this.checkPayTimer = 0
		},
		onUnload () {
			clearInterval(_this.checkPayTimer)
			_this.checkPayTimer = 0
		},
		onShareAppMessage () {
			if (_this.pageInfo) {
				return {
					title: _this.pageInfo.share_wxapp_info.title,
					imageUrl: _this.pageInfo.share_wxapp_info.image,
					path: `/pages/shop_new/payByOthers/payByOthers?order_id=${_this.order_id}`
				};
			}
			
		},
		methods: {
			setWxShare () {
				let share = _this.pageInfo.share_h5_info
				let pageLink = `${common.requestDomain}packapp/${common.wxapp_type}/pages/shop_new/payByOthers/payByOthers?order_id=${_this.order_id}`
				pageLink = common.addShareParam(pageLink)
				let shareWxLink = pageLink;
				var shareData = {
					title: share.title,
					desc: share.content,
					sendFriendLink: shareWxLink,
					share_img: share.image
				}
				common.setWxShare(shareData)
			},
			shareToFriend () {
				// #ifdef H5
				if (common.$checkPlat.checkWeixin()) {
					_this.webShareTip = true 
				} else {
					uni.showToast({
						icon: 'none',
						title: common.changeTxt('当前环境不支持分享') 
					})
				}
				// #endif
			},
			payForFriend () {
				wx.navigateTo({
					url: `/pages/shop_new/confirmOrder/pay?order_id=${_this.order_id}&type=shop&is_pay_for_others=1`
				});
			},
			closeMask (name) {
				_this[name] = false
			},
			goToShop () {
				if (common.checkIsFooterPage("/pages/shop_index/index")) {
					uni.switchTab({
						url: "/pages/shop_index/index"
					});
				} else {
					uni.navigateTo({
						url: '/pages/nofooter/shop/shop_index',
					})
				}
			},
			checkOrderDetail () {
				console.log('查看订单详情')
				common.parseUrl(_this.pageInfo.order_detail_url)
			}
		}
	}
	
	const getDetail = () => {
		common.post('Shop_new&a=paid', {order_id: _this.order_id}, (data) => {
			console.log('拼单详情', data)
			if (data) {
				
				if (data.uid == data.order_info.uid) {
					_this.isOrderUser = true
				} else {
					_this.isOrderUser = false
				}
				
				_this.pageInfo = data
				// #ifdef H5
				_this.setWxShare()
				// #endif
				console.log('分享的链接', `${common.requestDomain}packapp/plat/pages/shop_new/payByOthers/payByOthers?order_id=${_this.order_id}`)
				checkPay()
			}
			
		})
	}
	
	const checkPay = () => {
		common.post('Shop_new&a=pay_status', {order_id: _this.order_id, noTip: true}, (data) => {
			console.log('拼单是否支付', data)
			if (data.status == 4 || data.status == 5) {
				// 订单已取消
				_this.orderStatus = 2
			} else {
				// 订单已支付
				_this.orderStatus = data.paid
			}
			console.log('_this.orderStatus', _this.orderStatus);
			
			// payUser: 0自己支付  1当前打开的好友支付 2别人支付 3不知身份
			if ( data.pay_uid && data.pay_uid == _this.pageInfo.order_info.uid) {
				_this.payUser = 0
			} else if (_this.pageInfo.uid && data.pay_uid && _this.pageInfo.uid == data.pay_uid) {
				_this.payUser = 1
			} else if ((_this.pageInfo.uid || data.pay_uid) && _this.pageInfo.uid != data.pay_uid) {
				_this.payUser = 2
			} else {
				_this.payUser = 3
			}
			console.log('支付状态 isOrderUser=' + _this.isOrderUser, 'orderStatus=' + _this.orderStatus, ' payUser=' + _this.payUser)
			_this.payInfo = data
			if (_this.payInfo.paid != 0 || _this.payInfo.status != 0) {
				clearInterval(_this.checkPayTimer)
			}
		})
		if (_this.checkPayTimer == 0) {
			_this.checkPayTimer = setInterval(() => {
				checkPay()
			}, 6000)
		}
	}
</script>

<style lang="stylus" scoped>
.page
	padding-bottom 40px;
	.order-info
		padding 0 10px 100px
		text-align center
		color #fff
		.avatar
			padding 10px
			font-size 0
			.img
				width 60px
				height 60px
				border-radius 50%
		.desc-box
			padding-bottom 10px
			.nickname
				font-weight 600
	.btn-wrapper
		background #fff
		height 200px
		color #333
		display flex
		flex-direction column
		justify-content center
		align-items center
		border-radius 5px
		margin -100px 10px 0
		box-shadow 0px 0px 6px rgba(0, 0, 0, 0.08)
		.price-box
			text-align center
			.bold
				font-weight bold
			.big
				font-size 24px
				font-weight bold
		.solid-btn
			background rgb(6, 193, 174)
			color #fff
			width 80%
			border-radius 5px
			text-align center
			font-size 16px
			margin-top 30px
			border: 1px solid #fff
	.goods-list
		background #fff
		margin 10px
		box-shadow 0px 0px 6px rgba(0, 0, 0, 0.08)
		border-radius 5px
		padding 10px
		color #333
		.shop-name
			font-weight bold
		.goods-item
			padding-top 10px
			display flex
			overflow hidden
			.goods-img
				width 60px
				height 60px
				border-radius 2px
				margin-right 10px
				flex-shrink 0
				background #f4f4f4
			.info
				flex-grow 1
				font-size 14px
				overflow hidden
				.name-box
					display flex
					word-break break-all
					overflow hidden
					.goods-name
						flex-grow 1
						padding-right 5px
						text-overflow ellipsis
						white-space nowrap
						overflow hidden
					.goods-price
						flex-shrink 0
				.num
					color #999
	.tip-box
		margin 0 10px 10px
		color #555
		.desc
			font-size 12px
</style>
	